<template>
    <view class="content">
        <u-navbar :background="background" title="分享海报" title-color="#000" :border-bottom="false" :immersive="true"
            :is-back="true" back-icon-color="#000"></u-navbar>
        
        <view class="box">
            <image src="/static/del/46.jpg" mode="widthFix"></image>
            <view class="btns">
                <view class="btn-l">
                    <image src="../../static/icon/s_icon_05.png" class="s-icon-05"></image>
                    <view>保存</view>
                </view>
                <view class="btn-r">
                    <image src="../../static/icon/s_icon_06.png" class="s-icon-05"></image>
                    <view>分享</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                statusBar: 0,
                background: { backgroundColor: 'rgba(255,255,255,0)' },
            };
        },
        onLoad() {
            let _this = this;
            //状态栏高度
            uni.getSystemInfo({
            	success: function(res) {
            		_this.statusBar = res.statusBarHeight;
            	}
            });
        },
        methods: {
            
            onPageScroll: function(e) {
            	//nvue暂不支持滚动监听，可用bindingx代替
            	// console.log("滚动距离为：" + e.scrollTop);
            	let a = e.scrollTop * 0.05;
            	if (a > 1) {
            		a = 1;
            	}
                this.background.backgroundColor = 'rgba(255,255,255,1)';
            	// if (e.scrollTop == 0) {
            	// 	this.background.backgroundColor = 'rgba(0,0,0,0)';
            	// } else {
            	// 	this.background.backgroundColor = 'rgba(0,0,0,' + a + ')';
            	// }
            },
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #fff;
    }
    .box{
        position: relative;
    }
    .btns{
        width: 100vw;
        padding: 0 45rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        bottom: 45rpx;
        left: 0;
        z-index: 1;
    }
    .btns>view{
        width: 310rpx;
        height: 85rpx;
        font-size: 30rpx;
        border-radius: 15rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .btn-l{
        color: #fff;
        background-color: #f29700;
    }
    .btn-r{
        color: #fec427;
        background-color: #20212c;
    }
    .s-icon-05{
        width: 32rpx;
        height: 32rpx;
        margin-right: 20rpx;
    }

</style>
